<template>
  <div class="app-container">

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      >

      <el-table-column prop="roomName" label="会议室名称" />

      <el-table-column type="date" prop="cover" label="日期" sortable >
        <template   slot-scope="scope" >
          {{scope.row.sliceDate.substring(0,10)}}
        </template>
      </el-table-column>

      <el-table-column  prop="beginTime" label="开始时间"/>

      <el-table-column  prop="endTime" label="结束时间"/>

      <el-table-column  prop="commit" label="申请理由"/>

      <el-table-column type="status" prop="state" label="状态" sortable >
        <template   slot-scope="scope" >
          <el-tag type="success" v-if="scope.row.state==1">正常</el-tag>
          <el-tag type="info" v-else>取消</el-tag>
        </template>

      </el-table-column>

      <el-table-column type="date" prop="gmtCreate" label="申请时间" sortable >
        <template   slot-scope="scope" >
          {{scope.row.gmtCreate.substring(0,10)}}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center" prop="sliceId">
        <template slot-scope="scope">
          <el-button v-if="scope.row.state == 1" type="danger" size="mini" icon="el-icon-edit" @click="openCancel(scope.row.id)">取消预约</el-button>
          <el-button v-else type="info" size="mini"  disabled>取消预约</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>
<script>
import reservation from "../../api/reservation"
import userClient from "../../api/userClient";
export default{
  data(){
    return{
      list:"null",
      id: '1553325901993742338'
    }
  },
  created(){
    this.listByUserId()
  },
  methods:{
    listByUserId(){
      userClient.getByUserId(this.id)
      .then(response=>{
        console.log(response.data.list)
        this.list = response.data.list
      })
    },
    openCancel(id) {
      this.$confirm('此操作将取消预约, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userClient.cancel(id)
          .then(response=>{
            this.$message({
              type: 'success',
              message: '取消预约成功!'
            });
            this.listByUserId()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
  },
}
</script>
<style>

</style>
